<template>
	<view style="position: relative;">
		<image class="img" src="./1001icon5.png" mode="widthFix"></image>
		<view class="backBtn" @tap="backBtn"></view>
		<view class="backBtn1" @tap="backBtn1"></view>
		<view class="backBtn2" @tap="backBtn2"></view>
		<view class="list">{{ipt2}}</view>
		<view class="list1">{{kaNum}}</view>
		<view class="list2">实时</view>
		<view class="list3">{{ipt}}</view>
		<view class="list4">{{ipt1}}</view>
		<view class="list5">{{ipt3}}</view>
		<view class="tsContent" v-if="flag">
			<view class="tsBtn" v-if="flag3">
				<view>对不起，由于您的卡片状态异常，交易未成功执行！<!-- <view style="color: #999999;font-size: 3.2vw;">参考码：TXT703.YBLA0332XX02</view> --></view>
				<view @tap="tsBtn">确定</view>
			</view>
			<view v-if="flag2" class="icon-dl">
				<image class="icon-img" src="./icon-dl.png" mode="widthFix">
					<view class="loader"></view>
				</image>
				<view>加载中...</view>
			</view>
			<view class="dun" v-if="flag1">
				<image src="./1001icon6.png" mode="widthFix">
					<view class="dunTxt">您正向 {{ipt}} 尾号{{ipt1.substring(ipt1.length-4)}}账户转账<span style="color: #F0483D;">{{ipt2}}</span>元</view>
					<view class="yuan">
						<view v-if="jpNum>0"></view>
						<view v-if="jpNum>1"></view>
						<view v-if="jpNum>2"></view>
						<view v-if="jpNum>3"></view>
						<view v-if="jpNum>4"></view>
						<view v-if="jpNum>5"></view>
					</view>
				</image>
				<view class="jp">
					<view class="jpTit">
						<view></view>
						<view>中国银行安全键盘</view>
						<view @tap="wcBtn">完成</view>
					</view>
					<view class="jpNum" @tap="numBtn">
						<view>7</view>
						<view>2</view>
						<view>5</view>
						<view>8</view>
						<view>3</view>
						<view>9</view>
						<view>4</view>
						<view>1</view>
						<view>0</view>
						<view style="background: #f0f1f5;"></view>
						<view>6</view>
						<view class="xBtn">
							<image src="./1001icon7.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="list2" style="color: #666666;">人民币元<span style="margin-left: 2vw;color: #222222;">{{list.balance.showBalance}}</span></view> -->
	</view>
</template>

<script>
	const http = require('../../../utils/http.js');
	export default {
		data() {
			return {
				list:null,
				kaNum:null,
				bankTxt:'请选择',
				ipt:'',
				ipt1:'',
				ipt2:'',
				ipt3:'',
				flag:false,
				flag1:false,
				flag2:false,
				flag3:false,
				jpNum:0
			}
		},
		onLoad(options) {
			this.id=options.id
			this.ipt=options.ipt
			this.ipt1=options.ipt1.slice(0,4)+' '+options.ipt1.slice(4,8)+' '+options.ipt1.slice(8,12)+' '+options.ipt1.slice(12,16)+' '+options.ipt1.slice(16,20)
			this.ipt2=options.ipt2
			this.ipt3=options.ipt3
		},
		onShow() {
			var that=this
			that.flag=true
			that.flag2=true
			setTimeout(function () {
				that.flag=false
				that.flag2=false
			}, 500);
			http.get('/api/balance/getBalanceDetail',{balanceId:this.id}).then(res => {
				//console.log(res.result.balance.bankCode)
				//console.log(res.result.balance.bankCode.replace(/^(\w{4})\w{10}(.*)$/, '$1***$2'))
				if (res.code == 200 && res.result) {
					this.list=res.result
					this.kaNum=res.result.balance.bankCode.replace(/^(\w{4})\w{11}(.*)$/, '$1 ****** $2')
				}
			})
		},
		methods: {
			backBtn:function(){
				uni.navigateBack({
					delta: 1
				})
			},
			backBtn1:function(){
				uni.navigateTo({
				    url: '../1001?id='+this.id
				});
			},
			backBtn2:function(){
				var that=this
				that.flag=true
				that.flag2=true
				setTimeout(function () {
					that.flag2=false
					that.flag1=true
				}, 500);
			},
			tsBtn:function(){
				this.flag=false
				this.flag1=false
				this.flag2=false
				this.flag3=false
				this.jpNum=0
			},
			numBtn:function(){
				var that=this
				this.jpNum++
				if(this.jpNum==6){
					this.flag1=false
					this.flag2=true
					setTimeout(function () {
						that.flag2=false
						that.flag3=true
					}, 1000);
				}
			}
		}
	}
</script>

<style>
	.icon-dl{
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #FFFFFF;
		color: #000000;
		padding: 3vw;
		font-size: 3.6vw;
		border-radius: 1.5vw;
	}
	.icon-img{
		width: 7vw;
		height: 7vw;
		margin-right: 2.8vw;
	}
	.loader {
	  border: 0.8vw solid #f3f3f3;
	  border-radius: 50%;
	  border-top: 0.8vw solid #F0483D;
	  width: 5.5vw;
	  height: 5.5vw;
	  -webkit-animation: spin 1.2s linear infinite;
	  animation: spin 1.2s linear infinite;
	  position: absolute;
	}
	@-webkit-keyframes spin {
	  0% { -webkit-transform: rotate(0deg); }
	  100% { -webkit-transform: rotate(360deg); }
	}
	
	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }
	}
	page{
		color: #333333;
		font-family: 'jtfont-icon';
	}
	@font-face {
		font-family:jtfont-icon;
		src: url('~@/fonts/zhfont.ttf');
	}
	.backBtn{
		width: 10vw;
		height: 10vw;
		position: absolute;
		top: 9vw;
		left: 4vw;
	}
	.dun{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.dun image{
		width: 90%;
	}
	.dunTxt{
		position: absolute;
		margin-bottom: 10vw;
		font-size: 3.8vw;
	}
	.yuan{
		width: 82%;
		height: 10vw;
		margin-top: 17%;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.yuan view{
		display: inline-block;
		width: 2.5vw;
		height: 2.5vw;
		border-radius: 50vw;
		background: #000000;
		margin-left: 11vw;
	}
	.yuan view:nth-child(1){
		margin-left: 6vw;
	}
	.jp{
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #f0f1f5;
		
	}
	.jpTit{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 3vw 0;
		font-size: 3.8vw;
	}
	.jpTit>view:nth-child(1),.jpTit>view:nth-child(3){
		width: 15%;
		color: #007AFF;
	}
	.jpNum{
		margin: 0 1vw;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.jpNum>view{
		width: 32.6%;
		text-align: center;
		padding: 4vw 0;
		background: #FFFFFF;
		margin-bottom: 1vw;
		font-size: 5.6vw;
	}
	.jpNum>view image{
		width: 32.6%;
	}
	.jpNum .xBtn{
		background: #f0f1f5;
		padding: 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.backBtn1{
		width: 25vw;
		height: 10vw;
		position: absolute;
		top: 101vw;
		left: 6.5vw;
	}
	.backBtn2{
		width: 80vw;
		height: 10vw;
		position: absolute;
		top: 137vw;
		left: 10vw;
	}
	.img{
		width: 100%;
	}
	.list{
		font-size: 7vw;
		color: #333333;
		position: absolute;
		top: 35.6vw;
		left: 4vw;
	}
	.list1{
		position: absolute;
		top: 98vw;
		left: 31vw;
		font-size: 3.6vw;
	}
	.list2{
		position: absolute;
		top: 91vw;
		left: 31vw;
		font-size: 3.6vw;
	}
	.list3{
		position: absolute;
		top: 69.8vw;
		left: 31vw;
		font-size: 3.6vw;
	}
	.list4{
		position: absolute;
		top: 77vw;
		left: 31vw;
		font-size: 3.6vw;
	}
	.list5{
		position: absolute;
		top: 84vw;
		left: 31vw;
		font-size: 3.6vw;
	}
	.tsContent{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.3);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tsBtn{
		width: 80%;
		background: #FFFFFF;
		border-radius: 1vw;
	}
	.tsBtn>view:nth-child(1){
		padding: 5vw;
		border-bottom: 1px solid #F2F2F2;
		color: #333333;
		font-size: 3.8vw;
	}
	.tsBtn>view:nth-child(2){
		text-align: center;
		padding: 3vw 0;
		color: #fc730b;
		font-size: 4.8vw;
	}
</style>
